<template>
  <el-card class="box-card">
    <template #header>
      <div class="box-header">
        <h4>{{ title }}</h4>
        <div>
          <slot name="header-right"></slot>
          <el-button
            type="primary"
            v-if="showRefresh"
            @click="emits('emit-refresh')"
            :loading="isRefresh"
          >
            <i class="iconfont icon-shuaxin" v-if="!isRefresh"></i>
            刷新</el-button
          >
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    title: string
    showRefresh?: boolean
    isRefresh?: boolean
  }>(),
  { showRefresh: false, isRefresh: false }
)
const emits = defineEmits<{
  (e: 'emit-refresh'): void
}>()
</script>

<style lang="scss" scoped>
.box-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  h4 {
    line-height: 32px;
  }
}
</style>
